<template>
<div id="navBar">
    <!-- 右侧弹出层 -->
    <mt-popup
        v-model="showDialog"  position="right" class="poupBox">
        <div class="popup_inner">
            <div  class="popup_inner_header">
              <div class="popup_inner_btn_close" @click="showPoupClick"> ＜ </div>
                更多频道
            </div>
            <div class="myChannel" >
              <div class="myChannel_header">
                <div>我的频道</div>
                <div class="myChannel_btn" @click="myChannelClick">{{showMyChannelItemBtnLabel}}</div>
              </div>
              <div class="myChannel_body">
                 <div class="myChannel_body_item" @click="removeItem" v-show="item.isChoose" v-for="(item,index) in AllNavItemList" :key="index" :id="item.id">
                   {{item.value}}
                   <div class="myChannel_body_item_btn" :id="item.id" v-show="showMyChannelItemBtn">×</div>
                 </div>
              </div>
            </div>

            <div class="recommendChannel" v-show="recommendItemNum">
              <div class="myChannel_header">
                <div>推荐频道</div>
              </div>
              <div class="myChannel_body">
                 <div class="myChannel_body_item" @click="addItem" v-show="!item.isChoose" v-for="(item,index) in AllNavItemList" :key="index" :id="item.id">
                   +{{item.value}}
                 </div>
              </div>
            </div>

        </div>
    </mt-popup>
    <div class="navBar_header_box">
        <div class="navBar_box" @click="navBarClick">
            <div class="navBar_box_item" v-show="item.isChoose" v-for="(item,index) in navList " :key="index" :id="item.id">{{item.value}}</div>
        </div>
        <div class="add_item" @click="showPoupClick">
            <span>+</span>
        </div>
    </div>
</div>
</template>
<script>
export default {
  created() {
    //获取本地navlist储存信息
    let navList = JSON.parse(localStorage.getItem("navList"));
    if (navList) {
      this.navList = navList;
      this.AllNavItemList = navList;
    }
  },
  components: {},
  computed: {
    // 计算属性的 getter
    recommendItemNum: function() {
      // `this` 指向 vm 实例t
      let num = 0;
      this.AllNavItemList.map(item => {
        if (!item.isChoose) {
          num++;
        }
      });
      return num;
    }
  },
  data() {
    return {
      showMyChannelItemBtnLabel: "编辑",
      showMyChannelItemBtn: false,
      showDialog: false,
      AllNavItemList: [
        { id: 1, value: "电影", isChoose: true },
        { id: 2, value: "网播", isChoose: true },
        { id: 3, value: "情报", isChoose: false },
        { id: 4, value: "榜单", isChoose: false }
      ],
      navList: [
        { id: 1, value: "电影", isChoose: true },
        { id: 2, value: "网播", isChoose: true },
        { id: 3, value: "情报", isChoose: false },
        { id: 4, value: "榜单", isChoose: false }
      ]
    };
  },
  methods: {
    navBarClick(event) {
      // console.log(event.target.id);
      //向父组件传值
      this.$emit("navChooseID", event.target.id);
    },
    showPoupClick() {
      this.showDialog = !this.showDialog;
    },
    //我的频道编辑事件
    myChannelClick() {
      this.showMyChannelItemBtn = !this.showMyChannelItemBtn;
      this.showMyChannelItemBtn
        ? (this.showMyChannelItemBtnLabel = "完成")
        : (this.showMyChannelItemBtnLabel = "编辑");
      if (!this.showMyChannelItemBtn) {
        //储存本地，用于每次从本地获取用户菜单状态
        localStorage.setItem("navList", JSON.stringify(this.navList));
        this.navList = this.AllNavItemList;
      }
    },
    //移除我的频道
    removeItem(event) {
      if (this.showMyChannelItemBtn) {
        //可编辑时
        console.log(event.target.id);
        if (this.AllNavItemList.length - this.recommendItemNum <= 1) {
          alert("我的频道不能少于一条");
          return;
        }
        let targetId = event.target.id;
        this.AllNavItemList.forEach(item => {
          if (item.id == targetId) {
            item.isChoose = false;
          }
        });
      }
    },
    //增加我的频道
    addItem(event) {
      console.log(event.target.id);
      let targetId = event.target.id;
      this.AllNavItemList.forEach(item => {
        if (item.id == targetId) {
          item.isChoose = true;
          this.navList = this.AllNavItemList;
          //储存本地，用于每次从本地获取用户菜单状态
          localStorage.setItem("navList", JSON.stringify(this.navList));
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
.mint-popup-right {
  width: 100%;
  height: 100%;
}
.popup_inner {
  width: 100%;
  height: 100%;
}
.popup_inner_header {
  width: 100%;
  height: 80px;
  line-height: 80px;
  font-size: 34px;
  text-align: center;
  border-bottom: 1px solid #ddd;
}
.popup_inner_btn_close {
  float: left;
  padding-left: 30px;
  font-size: 34px;
}
.myChannel,
.recommendChannel {
  width: 100%;
}
.myChannel {
  border-bottom: 1px solid #ddd;
  padding-bottom: 20px;
}
.myChannel_header {
  width: 100%;
  height: 80px;
  line-height: 80px;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
}
.myChannel_btn {
  height: 40px;
  line-height: 40px;
  margin-top: 20px;
  padding: 0 20px;
  border-radius: 10%;
  border: 1px solid #ddd;
  color: #bd1ae6;
}
.myChannel_body {
  width: 100%;
  padding: 0 5%;
  display: flex;
  flex-wrap: wrap;
}
.myChannel_body_item {
  position: relative;
  width: 27%;
  text-align: center;
  border: 1px solid #ddd;
  border-radius: 10%;
  line-height: 50px;
  height: 50px;
  margin: 20px;
  background: rgba(192, 192, 192, 0.1);
}
.myChannel_body_item_btn {
  position: absolute;
  width: 30px;
  height: 30px;
  font-size: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 50%;
  color: #333;
  background: #fff;
  border: 1px solid #ccc;
  top: -15px;
  right: -15px;
}
.navBar_header_box {
  width: 100%;
  display: flex;
  text-align: center;
  height: 1rem;
  line-height: 1rem;
  border-bottom: 1px solid #ddd;
}
.navBar_box {
  width: 90%;
  display: flex;
  justify-content: space-around;
}
.navBar_box_item {
  width: 100%;
  text-align: center;
}
.add_item {
  width: 10%;
}
.add_item span {
  font-size: 30px;
}
</style>
